<template>
  <div id="ifcLoadContainer"></div>
</template>

<script>
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import {RoomEnvironment} from 'three/examples/jsm/environments/RoomEnvironment';

export default {
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      controls: null
    };
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      this.scene = new THREE.Scene();
      this.scene.add(new THREE.AmbientLight(0x404040, 6)); //环境光
      this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
      this.light.position.set(50, 200, 100);
      this.light.position.multiplyScalar(0.3);
      this.scene.add(this.light);
      /**
       * 相机设置
       */
      let container = document.getElementById("ifcLoadContainer");//显示3D模型的容器
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20);
      this.camera.position.set(-0.75, 0.7, 1.25);

      /**
       * 创建渲染器对象
       */
      this.renderer = new THREE.WebGLRenderer({alpha: true});
      this.renderer.setSize(container.clientWidth, container.clientHeight);

      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
      this.renderer.toneMappingExposure = 1;
      this.renderer.outputEncoding = THREE.sRGBEncoding;
      container.appendChild(this.renderer.domElement);

      const environment = new RoomEnvironment();
      const pmremGenerator = new THREE.PMREMGenerator(this.renderer);

      this.scene.background = new THREE.Color(0xbbbbbb);
      this.scene.environment = pmremGenerator.fromScene(environment).texture;
      container.appendChild(this.renderer.domElement);
      //创建控件对象
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.minDistance = 1;
      this.controls.maxDistance = 10;
      this.controls.update();
      this.loadGltf();
    },
    loadGltf() {
      let loader = new GLTFLoader();
      //load一个测试模型路径：
      loader.load("/load/gltf/SheenChair.glb", (gltf) => {
        this.scene.add(gltf.scene);
      });
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.controls.update();
      this.renderer.render(this.scene, this.camera);
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
}

#ifcLoadContainer {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
